<template>
    <div class="cardbox">
        <div class="card"> 
            <van-image round width="6rem" height="6rem" src="" class="headimg" @click="login" v-show="!islogin"/>
            <div class="username">{{ username }}</div>
            <span class="headimg_text" v-if="!islogin">点击头像登录</span>
            <span class="headimg_text" v-if="islogin" @click="loginout">退出登录</span>
            <van-image round width="6rem" height="6rem" :src="headimg" class="headimg" v-show="islogin"/>
        </div>
    </div>
    <van-popup v-model:show="show" :style="{ padding: '64px' }"><span class="word">扫码登录</span><img
            :src="imgurl" ></van-popup>

    <Minesheet :uid="uid" ></Minesheet>
</template>

<script setup>

import { onMounted, ref, inject ,computed} from 'vue';
import { useRouter } from 'vue-router';
import { cookie, key, baseimg, userloginnewsApi,  logoutApi } from '../../api/login';
import Minesheet from './minesheet.vue';


let imgurl = ref()
let show = ref(false)
let keyval = ref()
let codestate = ref()
let checkTimer
let headimg = ref()
let username =ref()
const uid = ref('')
const router = useRouter()
const reload = inject('reload')
const getkey = async () => {
    let data = await key()
    keyval.value = data.data.unikey
    await getbaseimg()
}
const getbaseimg = async () => {
    let data = await baseimg(keyval.value)
    imgurl.value = data.data.qrimg
    checkTimer || clearInterval(checkTimer)
    checkTimer = setInterval(async () => {
        await checkQRCodeState()
    }, 1000)
}
const islogin = computed(()=>{
    return localStorage.getItem('cookie')
})
const checkQRCodeState = async () => {
    const res = await cookie(keyval.value)
    if (res.code !== codestate.value) {
        if (res.code == 803) {
            clearInterval(checkTimer)
            reload()
        } else if (res.code == 800) {
            clearInterval(checkTimer)
        } else if (res.code == 802) {
            console.log('等待扫码')
        }
        localStorage.setItem('cookie', res.cookie)
        codestate.value = res.code
    }
}

onMounted(async () => {
    if (localStorage.getItem('cookie')) {
        let data = await userloginnewsApi()
        if (data.profile == null) {
            console.log('为空')
            loginout()
            localStorage.removeItem('cookie')
        } else {
            console.log(data.profile.userId)
            uid.value = data.profile.userId
            headimg.value = data.profile.avatarUrl
            username.value = data.profile.nickname
        }
    }
})
const login = () => {
    // console.log('1')
    // router.push({
    //     path:"/login"
    // })
    show.value = true
    getkey()
}
const loginout = async()=>{
   let data = await logoutApi()
   console.log(data)
   localStorage.removeItem('cookie')
    reload()
}
</script>

<style scoped >
.card {

    border-radius: 10px;
    border: 1px solid #e4e7ed;
    height: 100px;
    background-color: white;
    margin: 100px 0;
    width: 85%;
    position:relative;
    left: 50%;
    transform: translateX(-50%);
}
.headimg {
    position: absolute;
    top: -40%;
    z-index: 999;
    left: 50%;
    transform: translateX(-50%);
    
}
.username{
    bottom: 30%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 16px;
}
.headimg_text{
    bottom: 0%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    color: rgb(238, 10, 36);
    font-size: 10px;
}
.word {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 10%;
    font-size: 25px;
}
</style>